<script setup name="CostAnalysis">
import { getEngTypesByCode } from '@/api/index.js';
import { useMain } from '@/store/app.js';
import { useWatch, useRequest} from '@/hooks';
import AreaForm from '@/views/components/AreaForm.vue';
import EnergyType from '@/components/EnergyType.vue';
import BuildTree from '@/components/BuildTree.vue';
import CostDetails from './components/CostDetails.vue';

const { projectType } = useMain();
const radio = ref(projectType);
const activeName = ref('overview');
const inId = ref(null);
const reset = ref(0);
const nodeData = ref(null);
const engType = ref(null);
const [engTypeList, , runEngType] = useRequest(getEngTypesByCode, {
  manual: true,
  onSuccess: res => {
    if (res.code === 200) {
      let id = res.data?.[0]?.id ?? null;
      if (id === 1) {
        engType.value = 'WATER';
      } else if (id === 2) {
        engType.value = 'ELECTRICITY';
      } else if (id === 3) {
        engType.value = 'AIR';
      } else if (id === 4) {
        engType.value = 'WARM';
      }
    }
  },
});
const handleQuery = queryParams => {
  inId.value = queryParams?.buildingCode?.enterpriseCode;
  runEngType({enterpriseCode: inId.value, projectType: radio.value, allType:false})
};
const resetQuery = () => {
  console.log(2222);
};
const engChange = val => {
  if (val === 1) {
    engType.value = 'WATER';
  } else if (val === 2) {
    engType.value = 'ELECTRICITY';
  } else if (val === 3) {
    engType.value = 'AIR';
  } else if (val === 4) {
    engType.value = 'WARM';
  }
};
const handleNodeData = node => {
  nodeData.value = node;
};
useWatch(
  radio,
  n => {
    reset.value = reset.value + 1;
  },
  { immediate: true },
);
useWatch(activeName, n => {
  console.log(n, 'activeName');
});
</script>
<template>
  <div class="app-container">
    <div class="u-df-st u-base-fg u-pl20 u-mb20">
      <el-radio-group v-model="radio" size="small" class="radio">
        <el-radio-button label="JC">监测机构</el-radio-button>
        <el-radio-button label="TG">托管机构</el-radio-button>
      </el-radio-group>
      <AreaForm
        ref="areaFormRef"
        :projectType="radio"
        :reset="reset"
        :propParams="true"
        @handleQuery="handleQuery"
        @resetQuery="resetQuery"
        :isStage="true"
        :showType="radio === 'TG' ? true : false"
        style="margin-bottom: 0px"
      />
    </div>
    <div class="u-df-spb">
      <el-tabs v-model="activeName" class="ca-tabs" style="width: calc(70% - 5px)">
        <el-tab-pane label="概览" name="overview"></el-tab-pane>
        <el-tab-pane label="按建筑区域监测" name="building"></el-tab-pane>
      </el-tabs>
      <div style="width: calc(30% - 5px)">
        <EnergyType :engList="engTypeList" class="u-plr20" @changeType="engChange" />
      </div>
    </div>
    <div class="u-df-st u-mt20" style="height: calc(100% - 170px)">
      <div v-show="activeName === 'building'" class="u-h100 u-p20 u-base-fg u-br4 left-container">
        <BuildTree :inId="inId" @nodeData="handleNodeData" />
      </div>
      <div class="u-h100 u-w100 u-br4 u-ovh-x" :class="activeName === 'building' ? 'u-ml20 right-container' : ''">
        <CostDetails :activeName="activeName" :inId="inId" :areaId="nodeData?.id" :type="engType" :radio="radio" />
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.u-plr20 {
  padding-left: 20px;
  padding-right: 20px;
}
</style>
